solution-card-layout 轻卡片layout

{
    "navigationBarTitleText": "智慧停车",
    "navigationStyle": "",
    "usingComponents": {
        "iov-titlebar": "../../components/solution-titlebar/index",
        "error-page": "../../components/error-page/index",
        "iov-layout": "../../components/solution-card-layout/index",
        "iov-tabs": "iov-ui/lib/tabs"
    },
    "window": {
        "left": 90,
        "top": 88,
        "right": 1280,
        "bottom": 1040,
        "showStyle": 1
    }
}

<iov-layout type="normal">
    <iov-titlebar slot="titlebar" showback="{{ true }}" bindrighticon="clickIcon" rightIcon="set-democar">
        <iov-tabs
            slot="filter"
            direction="horizontal"
            bindtabchange="tabchange"
            tabs="{{ tabs }}"
            active-name="1"
        ></iov-tabs>
    </iov-titlebar>
    <view class="wrap" slot="content">
        <error-page
            status="{{ status }}"
            errImg="https://bce.bdstatic.com/doc/bd-idg-clw-xiaoduzhushou/Paper/nocontent_62514d2.png"
        ></error-page>
    </view>
</iov-layout>

Page({
    // eslint-disable-line
    data: {
        tabs: [
            {
                name: '1',
                label: '全部订单'
            },
            {
                name: '2',
                label: '待离场'
            },
            {
                name: '3',
                label: '已完成'
            }
        ],
        loading: false,
        status: '7'// 参考error-page组件status取值
    },
    onInit(query) {
        console.log('onInit > query...', e)
    },
    clickIcon(e) {
        console.log('clickIcon...', e)
    },
    tabchange(e) {
        console.log('tabchange...', e)
    }
});

.wrap {
    display: flex;
    flex-direction: column;
    padding: 0.4rem 1.04rem 0;
    width: 100%;
    height: 100%;
}